<template>
  <el-upload
    ref="upload"
    class="avatar-uploader"
    action=""
    :accept="accept"
    :http-request="requestUpload"
    :before-upload="beforeUpload"
    :multiple="multiple"
    :show-file-list="false">
    <div class="btn-layout">
      <div class="btn-style">
        <template v-if="imageUrl == null || !usePreview">
          <el-button type="primary" plain v-if="uploadStyle == 1">{{btnText}}</el-button>
          <div class="upload-btn-layout" v-if="uploadStyle == 2" :style="{width:width+'px',height:height+'px'}">
            <i class="el-icon-upload2"/>
          </div>
        </template>
        <img class="upload-image" :src="imageUrl" v-if="imageUrl != null && usePreview"
             :style="{width:width+'px',height:height+'px'}">
      </div>
      <span class="btn-number">{{number}}</span>
      <span class="remark-layout">
        <pre class="remark-text">{{remark}}</pre>
      </span>
    </div>
  </el-upload>
</template>

<script>
  import { uploadOss } from '@/api/common'

  export default {
    name: 'UploadSingleView',
    props: {
      number: {
        type: String,
        default: ''
      },
      remark: {
        type: String,
        default: ''
      },
      uploadStyle: {
        type: Number,
        default: 1
      },
      queryParams: {
        type: Object,
        default: null
      },
      btnText: {
        type: String,
        default: '快速上传'
      },
      accept: {
        type: String,
        default: '.jpg,.jpeg,.png'
      },
      uploadFun: {
        type: Function,
        default: uploadOss
      },
      multiple: {
        type: Boolean,
        default: false
      },
      usePreview: {
        type: Boolean,
        default: false
      },
      width: {
        type: Number,
        default: 120
      },
      height: {
        type: Number,
        default: 120
      }
    },
    data() {
      return {
        imageUrl: null
      }
    },
    methods: {
      reset() {
        this.imageUrl = null
        this.$refs.upload.clearFiles()
      },
      inShowImage(image) {
        this.imageUrl = image
      },
      requestUpload(params) {
        let _this = this
        let file = params.file
        let formData = new FormData()
        formData.append('file', file)
        if (this.queryParams != null) {
          for (let item in this.queryParams) {
            formData.append(item, this.queryParams[item])
          }
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.uploadFun(formData).then(response => {
          if (response.code === 200) {
            _this.imageUrl = response.data
            _this.$emit('onUploadResult', response.data, _this.number)
          }
        }).finally(() => {
          loading.close()
        })
      },
      beforeUpload(file) {
        const isLt1M = file.size / 1024 / 1024 < 2
        if (!isLt1M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return isLt1M
      }
    }
  }
</script>

<style lang="scss">
  .btn-layout {
    position: relative;

    .btn-style {
      .upload-btn-layout {
        width: 120px;
        height: 120px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .el-icon-upload2 {
          font-size: 28px;
          color: #8c939d;
        }
      }

      .upload-image {
        width: 120px;
        height: 120px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
      }
    }

    .btn-number {
      position: absolute;
      left: 10px;
      top: 10px;
      font-weight: bold;
      font-size: 28px;
      color: #8c939d;
      text-shadow: 0 0 4px #32003C, 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .remark-layout {
      position: absolute;
      right: 10px;
      bottom: 0px;

      .remark-text {
        height: 10px;
        font-weight: bold;
        font-size: 10px;
        color: #ffffff;
        text-shadow: 0 0 4px #000000, 0 1px 2px rgba(0, 0, 0, 0.8);
      }
    }
  }

</style>
